<!--  -->
<template>
  <div class="main-content Strategies" :style="{ height: windowHeight + 'px' }">
    <div class="strategies-content" v-show="!showStrategiesDetail">
      <div class="strategies-tree-box" :style="{ height: windowHeight + 'px' }">
        <div class="fuzzySearchBox">
          <i class="iconfont iconsousuo"></i>
          <el-input placeholder="输入关键词查询"></el-input>
        </div>
        <el-tree
          v-loading="kpiLoading"
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
          node-key="id"
          highlight-current
          default-expand-all
        ></el-tree>
      </div>
      <div class="strategies-methods-box">
        <div class="btn-box">
          <el-button type="primary" size="medium" @click="handleEditClick({})"
            >添加策略</el-button
          >
        </div>
        <div class="screen-box">
          <el-form ref="searchForm" :model="searchForm">
            <el-form-item label="策略名称">
              <el-input
                v-model="searchForm.name"
                placeholder="请输入策略名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="searchForm.createTime"
                type="datetime"
                placeholder="请选择创建时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="创建人">
              <el-input
                v-model="searchForm.creater"
                placeholder="请选择创建人"
              ></el-input>
            </el-form-item>
            <el-button
              class="searchBtn"
              type="primary"
              @click="submitSearchForm()"
              >查询</el-button
            >
          </el-form>
        </div>
        <div class="table-box">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            :header-cell-style="{
              color: '#000',
              fontSize: '14px',
              backgroundColor: '#f8f8f8',
            }"
            :row-style="{
              borderRadius: '20px',
            }"
          >
            <el-table-column prop="id" label="策略编号"> </el-table-column>
            <el-table-column prop="name" label="策略名称"> </el-table-column>
            <el-table-column prop="creatTime" label="创建时间">
            </el-table-column>
            <el-table-column prop="creater" label="创建人"> </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div class="handle-btn-box">
                  <el-button type="text" @click="handleEditClick(scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    class="delete-btn"
                    type="text"
                    @click="handleDeleteClick(scope.row)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-drawer
      :title="drawerTitle"
      :visible.sync="drawer"
      size="60%"
      direction="rtl"
    >
      <strategies-detail
        :strategiesData="currentStrategiesData"
      ></strategies-detail>
    </el-drawer>

    <bi-modal
      sureText="确认"
      modalType="small"
      :showModal="showDeleteModal"
      @cancel="showDeleteModal = false"
      @submit="submitDelete()"
    >
      <template v-slot:body>
        <div class="modal-tips">
          确认删除此策略吗？
        </div>
      </template>
    </bi-modal>
  </div>
</template>

<script>
import StrategiesDetail from "../../components/StrategiesDetail";
import Modal from "../../components/Modal";
export default {
  components: {
    "strategies-detail": StrategiesDetail,
    "bi-modal": Modal,
  },
  data() {
    return {
      kpiLoading: false, // KPI列表加载动画
      data: [
        {
          label: "盈利能力",
          children: [
            {
              label: "毛利",
            },
            {
              label: "产值",
            },
            {
              label: "保养产值",
            },
          ],
        },
        {
          label: "客户管理",
          children: [
            {
              label: "预约满意度",
            },
            {
              label: "首保满意度",
            },
          ],
        },
        {
          label: "服务贡献",
          children: [
            {
              label: "服务周转率",
            },
            {
              label: "工位周转率",
            },
          ],
        },
        {
          label: "人员贡献",
          children: [
            {
              label: "人均接车台次",
            },
            {
              label: "人均交车台次",
            },
          ],
        },
      ],
      defaultProps: {
        children: "childList",
        label: "cateName",
      },
      windowHeight: document.documentElement.clientHeight - 100, // 屏幕高度
      searchForm: {
        // 查询条件
        name: "",
        createTime: "",
        creater: "",
      },
      tableData: [
        {
          creatTime: "2016-05-01 12:02:20",
          id: "WB202010200912",
          name: "提升毛利方法一",
          creater: "刘青山",
        },
        {
          creatTime: "2016-05-01 12:02:20",
          id: "WB202010200912",
          name: "提升毛利方法一",
          creater: "刘青山",
        },
        {
          creatTime: "2016-05-01 12:02:20",
          id: "WB202010200912",
          name: "提升毛利方法一",
          creater: "刘青山",
        },
        {
          creatTime: "2016-05-01 12:02:20",
          id: "WB202010200912",
          name: "提升毛利方法一",
          creater: "刘青山",
        },
      ],
      currentPage: 1,
      showStrategiesDetail: false, // 控制 策略详情显示
      currentStrategiesData: {}, // 存储点击编辑的那一行的数据
      showDeleteModal: false, // 控制 删除策略modal显示
      drawer: false, // 控制 添加策略 显示
      drawerTitle: "添加策略", 
    };
  },
  watch: {
    windowHeight(val) {
      let that = this;
      console.log("实时屏幕高度：", val, that.windowHeight);
    },
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getKPIlist();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    // 获取KPI模块列表
    getKPIlist() {
      this.kpiLoading = true;
      this.$api.handleKPI.getKPIlist().then((res) => {
        console.log("KPI列表", res);
        if (res.length == 0) return this.$message.warning("暂无KPI数据");
        for (let i = 0; i < res.length; i++) {
          for (let y = 0; y < res[i].childList.length; y++) {
            // 查到每一个二级KPI下的三级KPI
            this.$api.handleKPI
              .getThirdKPIlist(res[i].childList[y].id)
              .then((res) => {
                if (res.data.length > 0) {
                  let thirdData = res.data;
                  for (let m = 0; m < thirdData.length; m++) {
                    thirdData[m].childList = [];
                  }
                  res[i].childList[y].childList = thirdData;
                }
              });
          }
        }
        this.kpiLoading = false;
        this.data = res;
      });
    },
    // 策略模块 点击
    handleNodeClick(data, node) {
      console.log(data);
      console.log(node);
      if (node.level === 1) return;
    },
    // 查询
    submitSearchForm() {},
    // 分页插件方法
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 表格 编辑
    handleEditClick(row) {
      this.currentStrategiesData = row;
      this.drawer = true;
    },
    // 关闭 策略详情模块
    getStrategiesState() {
      this.showStrategiesDetail = false;
    },
    // 表格 删除
    handleDeleteClick(row) {
      console.log(row);
      this.showDeleteModal = true;
    },

    // 删除策略 确认
    submitDelete() {},
  },
};
</script>
<style lang="less">
.Strategies {
  padding: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  .strategies-content {
    .alignCenter(flex, unset, unset);
  }
  .strategies-tree-box {
    width: 300px;
    flex: 0 0 300px;
    border-right: 1px solid @border-color-lighter;
    padding: 15px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    .fuzzySearchBox {
      width: 300px;
      .alignCenter();
      .fuzzySearch();
    }
    .el-tree {
      margin-top: 10px;
      background: transparent;
      .el-tree-node {
        padding: 10px 0;
      }
    }
  }
  .strategies-methods-box {
    flex: 1;
    width: 0;
    padding: 20px;
    box-sizing: border-box;
    .screen-box {
      .el-form {
        .alignCenter();
        flex-wrap: wrap;
        .el-form-item {
          margin: 15px 0 0 10px;
          &:first-child {
            margin-left: 0;
          }
          .alignCenter();
        }
        .searchBtn {
          margin-left: 10px;
          margin-top: 15px;
        }
      }
    }
    .table-box {
      margin-top: 20px;
      .handle-btn-box {
        .delete-btn {
          color: @color-danger;
          &:hover {
            color: @color-danger-hover;
          }
        }
      }
    }
  }
}
</style>
